<script lang="ts" setup name="Father">
    import { ref } from 'vue';
    import Son from './Son.vue';

    let car = ref('奔驰');
    let toy = ref('');

    // 子传父，需要通过回调函数来实现
    function getToy(newToy: string): void {
        toy.value = newToy;
    }
</script>

<template>
    <div class="father">
        <h2>父组件</h2>
        <p>汽车：{{ car }}</p>
        <p v-show="toy">儿子的玩具：{{ toy }}</p>
        <Son :car="car" :sendToy="getToy"/>
    </div>
</template>

<style scoped>
    .father {
        background-color: gray;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 0 10px;
    }
</style>